{% extends 'mom.html' %}    <!-- 模板继承 -->
{% load static %}   <!-- 加载静态资源 -->

{% block css %}
    <link href="{% static 'css/bootstrap-datepicker.css' %}" rel="stylesheet" type="text/css"/>
{% endblock %}


{% block content %}
    <div>
        <h1>任务 <span class="label label-default">TK</span></h1>
        <br/>

        <button id="btnadd" type="button" class="btn btn-primary btn-lg">
            新建任务
        </button>   <!-- 需要参数与响应的对话框对应 data-toggle="modal" data-target="#task_Modal" -->
        <!-- 用js绑定也可以，见下文 -->

        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading"><h4>任务列表</h4></div>

            <!-- Table -->
            <table class="table">
                <tr>
                    {% for i in form %}
                        <td>{{ i.label }}</td>
                    {% endfor %}
                    <td>操作</td>
                </tr>
                {% for i in data %}
                    <tr usdel="{{ i.id }}">
                        <td>{{ i.title }}</td>
                        <td>{{ i.content }}</td>
                        <td>{{ i.creat_time }}</td>
                        <td>{{ i.get_lev_display }}</td>
                        <td>{{ i.per }}</td>
                        <td>{{ i.get_status_display }}</td>
                        <td>
                            <input usedit="{{ i.id }}" class="btn btn-primary btn-xs user-edit" type="button"
                                   value="编辑"/>
                            <input usdel="{{ i.id }}" class="btn btn-danger btn-xs user-del" type="button" value="删除"/>
                            <!-- user-del个性化样式(这里做标签用) 自定义属性usdel 使用js绑定 -->
                        </td>
                    </tr>
                {% endfor %}
            </table>
            {{ the_pag_html }}
        </div>

    </div>

    <!-- 新建对话框 -->    <!-- 注意ID对应 -->
    <div class="modal fade" id="task_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新建任务</h4>
                </div>
                <div class="modal-body">
                    <form id="taskform" method="post" novalidate>
                        {% csrf_token %}
                        <div class="clearfix">
                            {% for i in form %}
                                <div class="col-xs-6">
                                    <div class="form-group">
                                        <label>{{ i.label }}</label>
                                        {{ i }}
                                        <!-- 每一个都自动加入了id='id_字段名'
                                         (<input id="id_creat_time">)-->
                                        <span class="error-msg" style="color: red"></span>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button id="btnsave" type="button" class="btn btn-primary">保 存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除对话框 -->
    <div class="modal fade" id="del_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <h4>是否删除！？</h4>
                <p style="margin: auto">你可以选择删除或者不删除，随便你。</p>
                <p style="margin: auto auto;text-align: right">
                    <button id="del_aj" type="button" class="btn btn-danger">删掉！</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">算了吧</button>
                </p>
            </div>
        </div>
    </div>


{% endblock %}


{% block js %}
    <script type="text/javascript" src="{% static 'js/bootstrap-datepicker.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap-datepicker.zh-CN.min.js' %}"></script>

    <script type="text/javascript">

        var del_id;//全局变量
        var edit_id;

        $(function () { //加载好页面后自动运行

            bindBtnAdd();//调用函数
            bindBtnSave();
            bindBtnDel();
            bindBtnDelaj();
            bindBtnEdit();

            $('#id_creat_time').datepicker({  //日期插件    //#id_creat_time 是id(<input id="id_creat_time">)
                language: 'zh-CN',
                format: 'yyyy-mm-dd',
                startDate: '0', //只能从当前日期开始，删掉则不受限制
                autoclose: true
            });
        })

        function bindBtnAdd() {     //新建任务显示对话框,绑定按键
            $('#btnadd').click(function () { //使用JS进行按钮与弹出窗的绑定,点击操作
                edit_id=undefined;//清除掉编辑的信息
                $('#taskform')[0].reset();
                $('#myModalLabel').text('新建任务');
                $('#task_Modal').modal('show');  //id需要一一对应 hide隐藏对话框
            });
        }

        function bindBtnSave() {    //新建任务上传数据,绑定按键
            $('#btnsave').click(function () {
                $('.error-msg').empty();  //清除错误信息  //找到所有带error-msg(这里是class)的全部清空
                if (edit_id) {  //如果是编辑状态
                    edit_post();
                }
                else {  //否则就是添加状态
                    new_post();
                }

            })
        }

        function edit_post() {  //上传编辑后的数据
            $.ajax({        //更新编辑后的数据
                    url: "/task/"+'?edit='+edit_id,
                    type: 'post',
                    data: $('#taskform').serialize(),
                    dataType: 'JSON',
                    success: function (res) {//成功后执行这个函数 res服务器返回的值
                        if (res.status) {   //成功
                            //alert('创建成功');//弹窗提示
                            //$('#taskform')[0].reset();//表单置空  //('#taskform')-->jQuery对象 *[0]-->DOM对象
                            $('#task_Modal').modal('hide');
                            location.reload();//刷新
                        } else {  //显示错误信息
                            $.each(res.err, function (name, errlist) {    //循环显示错误信息
                                $('#id_' + name).next().text(errlist[0]);//找到id标签的下一个标签写入文本
                            })
                        }
                    }
                });
        }
        
        function new_post() {   //上传新数据
             $.ajax({        //添加新数据
                    url: "/task/",
                    type: 'post',
                    data: $('#taskform').serialize(),
                    dataType: 'JSON',
                    success: function (res) {//成功后执行这个函数 res服务器返回的值
                        if (res.status) {   //成功
                            //alert('创建成功');//弹窗提示
                            //$('#taskform')[0].reset();//表单置空  //('#taskform')-->jQuery对象 *[0]-->DOM对象
                            $('#task_Modal').modal('hide');
                            location.reload();//刷新
                        } else {  //显示错误信息
                            $.each(res.err, function (name, errlist) {    //循环显示错误信息
                                $('#id_' + name).next().text(errlist[0]);//找到id标签的下一个标签写入文本
                            })
                        }
                    }
                });
        }

        function bindBtnDel() { //获取删除id，绑定按键
            $('.user-del').click(function () {
                $('#del_Modal').modal('show');
                del_id = $(this).attr('usdel')  //取当前点击的标签的属性的值
            });
        }

        function bindBtnDelaj() {   //确认删除,绑定按键
            $('#del_aj').click(function () {
                $.ajax({
                    url: '/task/',  // task/?d=1
                    type: 'get',
                    data: {
                        d: del_id
                    },
                    dataType: 'json',
                    success: function (res) {
                        $('#del_Modal').modal('hide');
                        location.reload();//刷新显示
                        //$('tr[usdel='+del_id+']').remove();//找到数据删除它(删除html),就可以不刷新界面了
                    }
                });
            });
        }

        function bindBtnEdit() { //获取编辑id,绑定按键
            $('.user-edit').click(function () {
                var uid = $(this).attr('usedit');
                edit_id=uid;
                $('#taskform')[0].reset();

                //发送AJ获取数据
                $.ajax({
                    url: '/task/',  // task/?ed=1
                    type: 'get',
                    data: {ed: uid},
                    dataType: 'json',
                    success: function (res) {
                        //console.log(res.edit_data);
                        $.each(res.edit_data, function (name, value) {
                            $('#id_' + name).val(value);    //对这个id中写入内容
                            console.log(name, value);
                        });
                        $('#myModalLabel').text('编辑');//修改对话框标题
                        $('#task_Modal').modal('show');
                    }
                });
            });
        }

    </script>
{% endblock %}
